<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <p>你有{{ $store.state.money }}元</p>
    <button @click="add">跳转</button>
    <button @click="money">花了2元</button>
    <p>{{ $store.getters.newMoney }}</p>
    <button @click="money2">前过两秒到</button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  methods: {
    add() {
      this.$router.push('/about/123')
    },
    money() {
      this.$store.commit('setMoney', this.$store.state.money - 2)
    },
    money2() {
      this.$store.dispatch('lazyMoney', this.$store.state.money + 4)
    }
  }
}
</script>
